<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="dataForm"
      status-icon
      label-width="200px"
    >
      <el-form-item label="店铺名称" prop="litemall_mall_name">
        <el-input v-model="dataForm.litemall_mall_name" />
      </el-form-item>
      <el-form-item label="店铺简称" prop="litemall_mall_name">
        <el-input v-model="dataForm.litemall_mall_shop_acronym" />
      </el-form-item>
      <el-form-item label="店铺地址" prop="litemall_mall_address">
        <el-input v-model="dataForm.litemall_mall_address" />
      </el-form-item>
      <el-form-item label="地理坐标" prop="litemall_mall_longitude">
        <el-col :span="11">
          <el-input
            disabled
            v-model="dataForm.litemall_mall_longitude"
            :placeholder="$t('config_mall.placeholder.mall_longitude')"
          />
        </el-col>
        <el-col :span="2" style="text-align: center">-</el-col>
        <el-col :span="11">
          <el-input
            disabled
            v-model="dataForm.litemall_mall_latitude"
            :placeholder="$t('config_mall.placeholder.mall_latitude')"
          />
        </el-col>
      </el-form-item>
      <el-form-item
        label="联系电话"
        prop="litemall_mall_phone"
      >
        <el-input v-model="dataForm.litemall_mall_phone" />
      </el-form-item>
      <el-form-item label="店长微信" prop="litemall_mall_qrcode">
        <el-upload
          :action="uploadPath"
          :show-file-list="false"
          :on-success="handleQrcodeSuccess"
          :before-upload="beforeQrcodeUpload"
          class="avatar-uploader"
          accept="image/*"
        >
          <img v-if="dataForm.litemall_mall_qrcode" :src="dataForm.litemall_mall_qrcode" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
        <div class="upload-tip">建议尺寸：200px * 200px</div>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">{{ $t("app.button.cancel") }}</el-button>
        <el-button type="primary" @click="update">{{
          $t("app.button.confirm")
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listMall, updateMall } from "@/api/config";
import { uploadPath } from "@/api/storage";

export default {
  name: "ConfigMail",
  data() {
    return {
      uploadPath,
      dataForm: {
        litemall_mall_name: "",
        litemall_mall_address: "",
        litemall_mall_phone: "",
        litemall_mall_longitude: "",
        litemall_mall_latitude: "",
        litemall_mall_shop_acronym: "", // 店铺简称
        litemall_mall_business_hours: "", // 营业时间
        litemall_mall_qrcode: "", // 店长微信
      },
      rules: {
        litemall_mall_name: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_address: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_phone: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_longitude: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_latitude: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_shop_acronym: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_business_hours: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        litemall_mall_qrcode: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init: function () {
      listMall().then((response) => {
        this.dataForm = response.data.data;
      });
    },
    cancel() {
      this.init();
    },
    update() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.doUpdate();
      });
    },
    doUpdate() {
      updateMall(this.dataForm)
        .then((response) => {
          this.$message.success({
            title: "成功",
            message: "商场配置成功",
          });
        })
        .catch((response) => {
          this.$message.error({
            title: "失败",
            message: response.data.errmsg,
          });
        });
    },
    handleQrcodeSuccess(response, file) {
      if (response.errno === 0) {
        this.dataForm.litemall_mall_qrcode = response.data.url;
      }
    },
    beforeQrcodeUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  width: 800px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  display: inline-block;
  
  &:hover {
    border-color: #409EFF;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: auto;
  display: block;
}
.upload-tip {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
}
</style>
